/**
 * Created by user on 16/5/25.
 */

import React, {
    Component,
} from 'react'

import {
    StyleSheet,
    View,
    WebView,
    Dimensions,
    Platform,
    ImageBackground,
    ScrollView,
    Alert,
    // FlatList,
    TouchableOpacity,
    Text, Image
    //Toast
} from 'react-native';
import Swiper from 'react-native-swiper';
import VideoPlayerPage from './Control/Videopage'
import BasePage from './BasePage';
import Video from 'react-native-video'
import {NavigationBar} from 'teaset';
import CommonStyle from './Component/CommonStyle'
import PageView from "./Component/Common/PageView";

import Message from './Message'

import ScenePage from './ScenePage'

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
const X_WIDTH = 375;
const X_HEIGHT = 812;
import BoundPage from './BoundPage'


var iPX = (Platform.OS === 'ios' && ((screenH === X_HEIGHT && screenW === X_WIDTH) || (screenH === X_WIDTH && screenW === X_HEIGHT))) ? true : false


export default class QYLPage extends BasePage {


    handleMethod(isConnected) {
        console.log('test', (isConnected ? 'online' : 'offline'));
    }

    constructor(props) {

        super(props);
        this._onChangecount = this._onChangecount.bind(this);
        this.player = null

        this.state = {
            isplay: true,
            volume: 1,
            muted: false,
            resizeMode: 'contain',
            duration: 0.0,
            slideValue: 0.00,
            currentTime: 0,
            controls: false,
            paused: true,
            ignoreSilentSwitch: null,
            isBuffering: false,
            flag: true,

            data: [],
            ...this.state,
            showValue: "",
            postion: 0,
            topHeight: 210,
            statusHeight: 20,
            Replycontent: '',
            isvisable: true,
            videourl: 'http://124.129.157.208:8810/SD/2017qingdao/xiaoxueEnglish/grade3/b/1.mp4',

            isup: false,
            isonedui: true,
            istwodui: false

        };

        this.onLoad = this.onLoad.bind(this);
        this.onProgress = this.onProgress.bind(this);

    }


    componentWillMount() {

    }

    componentWillUnmount() {
    }

    onLoad() {

    }

    onProgress() {

    }

    onBuffer() {

    }

    onEnd() {

    }

    webOnError(err) {

        //this.refs[WEBVIEW_REF].reload();
    }

    webStartLoad(res) {


    }

    _onChangecount(inputData) {

        this.setState({Replycontent: inputData});
    }


    updown() {
        this.setState({
            isup: !this.state.isup
        });
    }

    isdui() {
        this.setState({
            isonedui: !this.state.isonedui,
            istwodui: !this.state.istwodui,
            isup: false
        });
    }

    popdalog() {
        Alert.alert('温馨提示', '尚未绑定网关，无法使用场景，请先绑定网关', [{
            text: '取消',
            onPress: () => console.log('Cancel Pressed'),
            style: 'cancel'
        }, {
            text: '去绑定', onPress: () => {
                this.navigator.push({
                    view: <BoundPage/>
                })
            }
        },])

    }


    //离家模式

    lijia() {
        this.navigator.push({
            view: <ScenePage/>
        })

    }

    renderNavigationBar() {
        return (
            <NavigationBar
                statusBarHidden={true}
            />

        );
    }


    message() {
        this.navigator.push({
            view: <Message/>
        })
    }

    render() {

        return (
            <PageView style={{flex: 1}} hiddenNav={true} fromPage={this} {...this.state}>

                <ImageBackground style={{flex: 1,}}
                                 source={require('./images/hbg.jpg')}>
                    <View style={{flex: 1, flexDirection: 'column', marginTop: 24}}>

                        <View style={{
                            height: 44,
                            flexDirection: 'row',
                            alignItems: 'center',
                        }}>

                            <TouchableOpacity
                                onPress={() => {
                                    this.updown()

                                }}
                            >
                                <Text
                                    tail={true}
                                    style={{
                                        fontSize: 18,
                                        textAlign: 'center',
                                        width: 100,
                                        marginLeft: 15,
                                        color: 'white'
                                    }}>{
                                    this.state.istwodui ? '个人设备' :


                                        "阿奶是的那段" ? ("阿奶是的那段".length > 4 ? "阿奶是的那段".substr(0, 4) + "..." : "阿奶是的那段") : ""}
                                </Text>

                            </TouchableOpacity>
                            <Image source={


                                this.state.isup ? require('./images/down.png') : require('./images/up.png')

                            }
                                   style={{height: 15, width: 17, marginLeft: 10}}/>

                            <TouchableOpacity
                                style={{
                                    position: 'absolute', right: 20
                                }}
                                onPress={() => {
                                    this.message()

                                }}
                            >
                                <Image source={require('./images/ling.png')}
                                       style={{height: 20, width: 20}}/>
                            </TouchableOpacity>
                        </View>


                        {
                            this.state.isup ?
                                <View
                                    style={{
                                        backgroundColor: 'rgba(178,178,178,0.5)',
                                        marginTop: 10,
                                        flexDirection: 'column',

                                        width: screenW,
                                        height: 80
                                    }}
                                >
                                    <TouchableOpacity
                                        onPress={() => {
                                            this.isdui()

                                        }}
                                    >
                                        <View style={{
                                            height: 40,
                                            justifyContent: 'center',
                                        }}>
                                            <Text style={{
                                                color: 'white',
                                                fontSize: 20, marginLeft: 40
                                            }}>
                                                阿奶是的那段
                                            </Text>

                                            {

                                                this.state.isonedui ?
                                                    <Image source={


                                                        require('./images/gou.png')

                                                    }
                                                           style={{
                                                               height: 15,
                                                               width: 17,
                                                               marginLeft: 10,
                                                               position: 'absolute',
                                                               right: 40
                                                           }}/>
                                                    : null

                                            }


                                        </View>
                                    </TouchableOpacity>
                                    <TouchableOpacity
                                        onPress={() => {

                                            this.isdui()
                                        }}
                                    >
                                        <View style={{

                                            backgroundColor: 'white',
                                            marginLeft: 40,
                                            marginRight: 40,
                                            height: 1
                                        }}/>
                                        <View style={{
                                            height: 40,
                                            justifyContent: 'center'
                                        }}>
                                            <Text style={{
                                                color: 'white', marginLeft: 40,
                                                fontSize: 20
                                            }}>
                                                个人设备
                                            </Text>

                                            {


                                                this.state.istwodui ?
                                                    <Image source={


                                                        require('./images/gou.png')

                                                    }
                                                           style={{
                                                               height: 15,
                                                               width: 17,
                                                               marginLeft: 10,
                                                               position: 'absolute',
                                                               right: 40
                                                           }}/>
                                                    : null
                                            }
                                        </View>
                                    </TouchableOpacity>
                                </View> : null

                        }

                        <View style={{
                            alignItems: 'center',
                            flexDirection: 'row',
                        }}>
                            <Text style={{
                                marginLeft: 10,
                                color: '#ffffff',
                                size: 15,
                                marginTop: 5
                            }}>
                                我的场景
                            </Text>
                            <Image source={


                                require('./images/flow.png')

                            }
                                   style={{
                                       height: 15,
                                       width: 15,
                                       marginTop: 2,
                                       marginLeft: 5
                                   }}/>
                        </View>
                        {
                            this.state.istwodui ?
                                <TouchableOpacity
                                    onPress={() => {


                                    }}
                                >
                                    <View style={{
                                        alignItems: 'center',
                                        flexDirection: 'column'
                                    }}>

                                        <Image source={require('./images/scene_icon_all.png')}
                                               style={{height: 70, width: 70,}}/>
                                        <Text style={
                                            {
                                                color: '#ffffff',
                                            }
                                        }>全部</Text>

                                    </View>
                                </TouchableOpacity>
                                :

                                <View style={{
                                    height: 100,
                                    width: screenW, marginTop: 10
                                }}>
                                    <ScrollView
                                        horizontal={true}
                                        ref="scrollerView"
                                        showsHorizontalScrollIndicator={false}
                                        style={{}}>
                                        <View style={{
                                            flexDirection: 'row',
                                            width: 360,
                                            justifyContent: 'space-around',
                                            alignItems: 'center',
                                        }}>
                                            <TouchableOpacity
                                                onPress={() => {
                                                    this.lijia()


                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_quick_01.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }> 离家模式</Text>

                                                </View>
                                            </TouchableOpacity>

                                            <TouchableOpacity
                                                onPress={() => {

                                                    this.popdalog()
                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_quick_02.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }>回家模式</Text>

                                                </View>
                                            </TouchableOpacity>

                                            <TouchableOpacity
                                                onPress={() => {

                                                    this.popdalog()
                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_quick_03.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }>睡眠</Text>

                                                </View>
                                            </TouchableOpacity>


                                            <TouchableOpacity
                                                onPress={() => {

                                                    this.popdalog()
                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_quick_04.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }>一键关灯</Text>

                                                </View>
                                            </TouchableOpacity>

                                        </View>

                                        <View style={{
                                            flexDirection: 'row',
                                            width: 360,
                                            justifyContent: 'space-around',
                                            alignItems: 'center',
                                        }}>


                                            <TouchableOpacity
                                                onPress={() => {
                                                    this.popdalog()

                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_quick_05.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }>起床</Text>

                                                </View>
                                            </TouchableOpacity>


                                            <TouchableOpacity
                                                onPress={() => {
                                                    this.popdalog()

                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_quick_06.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }>会客</Text>

                                                </View>
                                            </TouchableOpacity>

                                            <TouchableOpacity
                                                onPress={() => {
                                                    this.popdalog()

                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_quick_07.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }>就餐</Text>

                                                </View>
                                            </TouchableOpacity>
                                            <TouchableOpacity
                                                onPress={() => {

                                                    this.popdalog()
                                                }}
                                            >
                                                <View style={{
                                                    alignItems: 'center',
                                                    flexDirection: 'column'
                                                }}>

                                                    <Image source={require('./images/scene_icon_all.png')}
                                                           style={{height: 70, width: 70,}}/>
                                                    <Text style={
                                                        {
                                                            color: '#ffffff',
                                                        }
                                                    }>全部</Text>

                                                </View>
                                            </TouchableOpacity>


                                        </View>

                                    </ScrollView>
                                </View>


                        }


                        <View style={{
                            justifyContent: 'center',
                            alignItems: 'center',
                            flex: 1
                        }}>


                            <View style={
                                {
                                    flexDirection: 'column',
                                    justifyContent: 'center',
                                    alignItems: 'center',
                                }
                            }>


                                <View

                                    roundAsCircle={true}

                                    style={{
                                        width: 60,
                                        borderRadius: 30,
                                        height: 60,
                                        justifyContent: 'center',
                                        backgroundColor: 'white',
                                        alignItems: 'center',
                                    }}>
                                    <TouchableOpacity
                                        onPress={() => {
                                            this.popdalog()

                                        }}
                                    >
                                        <Image source={require('./images/addtwo.png')}
                                               style={{height: 40, width: 40,}}/>
                                    </TouchableOpacity>
                                </View>
                                <Text style={{
                                    color: 'white',
                                    marginTop: 15,
                                    fontSize: 14
                                }}>
                                    添加设备开启智能生活
                                </Text>

                            </View>

                        </View>

                    </View>
                </ImageBackground>

            </PageView>
        );
    }
}
var styles = StyleSheet.create({
    container2: {
        flex: 1,
        backgroundColor: '#efefef',
        justifyContent: 'flex-start', flexDirection: 'column',
        ...Platform.select({
            ios: {
                paddingTop: 0
            },
            android: {
                paddingTop: 0
            },
        }),
    },
    webView: {

        height: Dimensions.get('window').height - 64,
        width: Dimensions.get('window').width,
        //backgroundColor:'red',
    },
    webStyle: {

        paddingTop: Platform.OS === 'ios' ? 20 : 0,
    },
    wrapper: {
        height: 200
    },
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },
    swiper: {},
    backgroundVideo: {
        width: '100%', marginTop: 0, height: 210
    },
    container: {
        flex: 1,
        marginBottom: iPX ? 34 : 0,
        width: CommonStyle.screenwidth
    },
    headerContainer: {
        width: CommonStyle.screenwidth,
        height: 210,
        alignItems: 'center', justifyContent: 'center'
    },
    scrollTab: {
        flex: 1,
    }
});